
import React, { useCallback } from 'react';
import { connect } from 'react-redux';

import memo from '../../common/wrapMemo';
import SwitchLayer from './SwitchLayer';
import Zoom from './Zoom';
import Meature from './Measure';
import modules from '../../../store/modules';
// import Draw from './Draw';

const { actionCreators } = modules;

const Control = memo ((props) => {
    const {map, dispatch, mapInfo} = props;

    const changeMapInfo = useCallback((mapInfo) => {
        dispatch(actionCreators.mapInfo.update(mapInfo));
    },[]);
    return (
        <>
            <Meature 
                map={map}/>
            {/* <Draw   
                map={map}/> */}
            <SwitchLayer 
                map={map}
                mapInfo={mapInfo}
                changeMapInfo={changeMapInfo}/>
            <Zoom 
                map={map}/>
        </>
    )
});

function mapStateToProps(state) {
    return {
        mapInfo: state.get('mapInfo')
    };
}

export default connect(mapStateToProps)(Control);